<template>
	<div>
		<Form :label-width="80">
			<FormItem  label="权限码">
				<Input v-model="permission.code" placeholder="请输入权限码"></Input>
			</FormItem>
			<FormItem  label="权限名">
				<Input v-model="permission.name" placeholder="请输入权限名"></Input>
			</FormItem>
			<FormItem  label="权限类型">
				<Select @change="changeType" v-model="permission.type">
					<Option v-for="leixing in types" :value="leixing.code">{{leixing.name}}</Option>
				</Select>
			</FormItem>
			<FormItem v-if="permission.type == 'P'"  label="权限路径">
				<Input v-model="permission.path" placeholder="请输入路径"></Input>
			</FormItem>
			<FormItem v-if="permission.type == 'P'"  label="菜单标记">
				<Checkbox v-model="permission.mFlg">是否进菜单</Checkbox>
			</FormItem>
			<FormItem v-if="permission.type !== 'M'" label="父级权限">
				<permission-selected @selected="getCode" :permissions="tempPermissions"></permission-selected>
			</FormItem>
			<FormItem class="text-right">
				<Button @click="submit" type="primary">提交</Button>
			</FormItem>
		</Form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				permission: {
					code: "",
					path: "",
					name: "",
					type: "M",
					mFlg: false,
					aFlg: true,
					pCode: 0,
				},
				tempPermissions: [],
				allPermissions: [],
				permissionsMap: {},
				types: [
					{
						code: "M",
						name: "菜单"
					},
					{
						code: "P",
						name: "页面"
					},
					{
						code: "D",
						name: "详细页面"
					},
					{
						code: "A",
						name: "区域"
					},
					{
						code: "B",
						name: "按钮"
					},
				]
			}
		},
		props: {
			params: {
				type: Object,
				default: undefined,
			}
		},
		methods: {
			rPermissionSelected: function(pCode) {
				let pPermission = this.permissionsMap[pCode];
				pPermission.selected = true;
				
				if (this.permissionsMap[pPermission.pCode]) {
					this.rPermissionSelected(pPermission.pCode);
				}
			},
			rPermissionLoadMap: function(permissions) {
				for (let index in permissions) {
					let item = permissions[index];
					this.permissionsMap[item.code] = item;
					
					if (item.permissions instanceof Array && item.permissions.length > 0) {
						this.rPermissionLoadMap(item.permissions);
					}
				}
			},
			getCode: function(code) {
				console.log(code);
				this.permission.pCode = code;
			},
			changeType: function(type) {
				if (type === 'M') {
					this.permission.pCode = '0';
				}
				
				if (type !== 'P') {
					this.permission.path = "";
				}
			},
			submit: function() {
				
				if (this.permission.code.length === 0) {
					this.message.error("请输入权限码");
					return;
				} else if (this.permission.code.length > 20) {
					this.message.error("请输入权限码最多不超过20位");
					return;
				}

				if (this.permission.name.length === 0) {
					this.message.error("请输入权限名称");
					return;
				}
				
				if (this.permission.type === 'P') {
					if (this.permission.path.length === 0) {
						this.message.error("请输入权限路径");
						return;
					}
				} else if (this.permission.type === 'D') {
					this.permission.path = "";
				} else if (this.permission.type === 'M') {
					this.permission.mFlg = true;
				}
				
				this.http.put({
					url: "/permission/info",
					data: this.permission
				}).then(data => {
					this.message.info("修改成功");
					this.$router.detail.close();
				});
				
				
			},
			init: function() {
				this.http.get({
					url: "/permission/all"
				}).then(data => {
					this.allPermissions = data;
					this.rPermissionLoadMap(this.allPermissions);
					console.log(this.permissionsMap);
				}).then(() => {
					this.http.get({
						url: "/permission/info",
						param: {
							code: this.permission.code
						}
					}).then(data => {
						this.permission = data[0];
						this.rPermissionSelected(this.permission.pCode);
						this.tempPermissions = this.allPermissions;
					});
				});
			}
		},
		created: function() {
			this.permission.code = this.params.code;
			this.init();
		}
	}
</script>

<style>
</style>
